<template>
  <div class="moreSearch" moreSearch>
    <div class="breadcrumb-container">
      <a-breadcrumb>
        <a-breadcrumb-item>一级</a-breadcrumb-item>
        <a-breadcrumb-item>二级</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="filter">
      <div class="l">
        <a-input placeholder="关键字搜索" v-model="search.keywords" @pressEnter="statusChange" class="filter-input">
          <a-icon type="search" slot="suffix" style="cursor: pointer;" @click="statusChange" />
        </a-input>
        <a-select v-model="search.type" placeholder="请选择类型" class="filter-select">
          <a-select-option :value="0">重要筛选</a-select-option>
          <a-select-option :value="2">未完成</a-select-option>
          <a-select-option :value="3">已完成</a-select-option>
        </a-select>
      </div>
      <div class="r">
        <a-button type="primary">导出</a-button>
        <a-button type="primary">新建表单</a-button>
        <a-button type="primary" @click="showDrawer = true">更多搜索 ></a-button>
      </div>
      <a-drawer title="更多搜索" placement="right" :closable="false" :visible="showDrawer" @close="showDrawer = false">
        <div>
          <div>处理类型：</div>
          <a-select v-model="search.type" placeholder="请选择类型" style="width: 100%;">
            <a-select-option :value="0">次要搜索1</a-select-option>
            <a-select-option :value="2">未完成</a-select-option>
            <a-select-option :value="3">已完成</a-select-option>
          </a-select>
        </div>
        <div style="margin-top: 10px;">
          <div>经办类型：</div>
          <a-select v-model="search.type" placeholder="请选择类型" style="width: 100%;">
            <a-select-option :value="0">次要搜索2</a-select-option>
            <a-select-option :value="2">未完成</a-select-option>
            <a-select-option :value="3">已完成</a-select-option>
          </a-select>
        </div>
        <div style="margin-top: 10px;">
          <div>选择公司：</div>
          <a-select v-model="search.type" placeholder="请选择类型" style="width: 100%;">
            <a-select-option :value="0">次要搜索2</a-select-option>
            <a-select-option :value="2">未完成</a-select-option>
            <a-select-option :value="3">已完成</a-select-option>
          </a-select>
        </div>
        <div style="margin-top: 10px;">
          <div>处理时间：</div>
          <a-range-picker v-model="search.selectDate" style="width: 100%;" />
        </div>
        <div style="margin-top: 10px;">
          <div>其他筛选：</div>
          <a-input v-model="search.keywords" placeholder="请输入筛选条件" style="width: 100%;"></a-input>
        </div>
        <div style="margin-top: 10px;text-align: left;">
          <a-button @click="showDrawer = false">取消</a-button>
          <a-button type="primary">搜索</a-button>
        </div>
      </a-drawer>
    </div>
    <!-- 主体部分 -->
    <div class="main-body">
      <a-table :columns="columns" :pagination="false" :dataSource="data" rowKey="id" tableLayout="fixed" :scroll="{ x: 500, y: tableHeight }">
        <template slot="status" slot-scope="text, record">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span v-html="record.statusStr"></span>
            </template>
            <span>已处理</span>
          </a-tooltip>
        </template>
        <span slot="payStatus" slot-scope="text, record">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span v-html="record.payInfo"></span>
            </template>
            {{ record.payStatus }}
          </a-tooltip>
        </span>
        <template slot="action" slot-scope="row">
          <a>详情</a>
          <a>编辑</a>
        </template>
      </a-table>
    </div>
    <div class="paging-container">
      <a-pagination :current="1" showQuickJumper :showTotal="(total) => `共 ${total} 条`" style="margin: 10px 0;" :total="233" :pageSize="20" showLessItems />
    </div>
  </div>
</template>

<script>
import { simple } from './mock'
export default {
  name: 'moreSearch',
  data() {
    return {
      data: simple.data,
      columns: simple.columns,
      showDrawer: false,
      search: {
        keywords: '',
        type: 0,
        selectDate: [undefined, undefined]
      }
    }
  },
  methods: {
    statusChange() {}
  }
}
</script>

<style scoped lang="scss">
.moreSearch[moreSearch] {
}
</style>
